<template>
	<m-block spa="20 0" gap="20 20 0" class="pay-type" title="签约银行支付"  v-if="config708 == '1'">
		<radio-group v-model="payType" class="pay-box" >
			<template v-for="(item,key) in bankList" v-if="bankList.length>0">
				<view class="label flex-between" @click="setIdx(item.id,2)">
					<view class="left flex">
						<m-icon size="48" color="#06B4FD" type="bankicon" spa="0 24 0 0" />
						<view class="box">
							<view class="flex">
								<!-- <m-tag bgColor="" spa="0 0 0 15">{{item.bankcode}}</m-tag> -->
								<text class="title">{{item.bankcode}} </text>
								<text class="title">（{{item.idcard | bankNoStr2}}）</text>
							</view>
						</view>
					</view>
					<view class="right flex">
						<template v-if="item.id == value['payType'] && value['type'] == 2">
							<m-icon size="40" color="var(--theme)" type="icon-xuanzhong_-01" />
						</template>
						<template v-else>
							<m-icon size="40"  color="#999999" type="icon-weixuanzhong_-01-01" />
						</template>
					</view>
				</view>
			</template>
			<view class="label addBank flex-center" @click="Jump('/pages/wallet/bankCard2/bankCard2')">
				<m-icon type="addIcon" size="32"></m-icon>
				<text>签约银行卡</text>
			</view>
		</radio-group>
	</m-block>
</template>

<script>
	import { bankSignList } from '@/api/hnaPay.js'
	import { mapState } from 'vuex'
	export default {
		name: "payList",
		data() {
			return {
				bankList: [],
				payType: 1,
			};
		},
		props: {
			value: {
				type: [Number, String, Object],
				default: 0
			},
			//过滤  不显示
			filterArr: {
				type: Array,
				default: () => []
			},
			//过滤   只显示
			onlyArr: {
				type: Array,
				default: () => []
			}
		},
		computed: {
			...mapState({
				enum: state => state.general.enum,
				config: state => state.general.config,
				userbalance: state => state.user.userbalance,
				bankCardList: state => state.user.bankCardList,
			}),
			config708(){
				return this.config[708]
			},
			
		},
		watch: {
			payType(val) {
				this.$emit('input', val);
			},
		},


		methods: {
			async bankSignList() {
				const { data } = await bankSignList();
				this.bankList = data
			},
			setIdx(key, type) {
				console.log()
				this.payType = {
					payType: key,
					type: 2
				};
				this.$emit('input', {
					payType: key,
					type: 2
				});
			},
		},
	}
</script>

<style lang="scss">
	.pay-box {
		.label {
			padding: 30rpx 0;

			.left {
				.title {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
				}

				.balance {
					display: inline-block;
					padding-top: 10rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}

		.addBank {
			padding: 20rpx 0;

			text {
				padding-left: 10rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #959595;
			}
		}

		.label+.label {
			border-top: 1rpx solid var(--border);
			padding-top: 30rpx;
		}
	}
</style>